import React,{Component} from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import util from "@/common/util"
import layer from '@/common/layer'
import SelView from '@/components/sel'
import RadioPicker from '@/components/radiopicker'
import Picker from '@/components/picker'

class Pro extends Component {
    constructor(props){
        super()
        this.state={
            // professional  身份信息
            professionalGroups:[
                {value:3,label:"上班族"},
                {value:1,label:'个体户'},
                {value:2,label:'企业主'},
                {value:0,label:'自由职业者'}
            ],
            professional:0,
            professionalLabel:'自由职业者',
            professionalShow:false,
            
            // credit  信用情况
            creditGroups:[
                {value:0,label:'优秀'},
                {value:1,label:'良好'},
                {value:2,label:'一般'}
            ],
            credit:0,
            creditLabel:'优秀',
            creditShow:false,

            // salary  月收入
            salaryGroups:[
                {value:0,label:'2000以下'},
                {value:1,label:'2000-5000'},
                {value:2,label:'5000-10000'},
                {value:3,label:'10000以上'}
            ],
            salary:0,
            salaryLabel:'2000以下',
            salaryShow:false,

            // loanAmount  贷款金额
            loanAmountGroups:[
                {value:1,label:'1万元'},{value:2,label:'2万元'},{value:3,label:'3万元'},{value:4,label:'4万元'},{value:5,label:'5万元'},
                {value:10,label:'10万元'},{value:15,label:'15万元'},{value:20,label:'20万元'},{value:30,label:'30万元'},{value:50,label:'50万元'},
                {value:100,label:'100万元'},{value:200,label:'200万元'},{value:300,label:'300万元'},{value:5,label:'500万元'},{value:1000,label:'1000万元'},
            ],
            loanAmount:10,
            loanAmountLabel:'10万元',
            loanAmountShow:false,


            // loanType  贷款类型
            loanTypeGroups:[
                {value:2,label:'房押'},
                {value:1,label:'车押'},
                {value:0,label:'信用'},
                {value:3,label:'质押'}
            ],
            loanType:0,
            loanTypeLabel:'信用',
            loanTypeShow:false,

            // loanTime  贷款期限
            loanTimeGroups:[
                {value:1,label:'1年'},{value:2,label:'2年'},{value:3,label:'3年'},{value:4,label:'4年'},
                {value:5,label:'5年'},{value:6,label:'6年'},{value:7,label:'7年'},{value:8,label:'8年'}
            ],
            loanTime:1,
            loanTimeLabel:'1年',
            loanTimeShow:false,

            // payment   还款方式
            paymentGroups:[
                {value:0,label:'等额本金'},{value:1,label:'等额本息'},
                {value:2,label:'先息后本'},{value:3,label:'一次性还本付息'}
            ],
            payment:1,
            paymentLabel:'等额本息',
            paymentShow:false,

            // 放款期限
            takeLoanTimesGroups:[
                {value:0,label:'当天放款'},{value:3,label:'1-3个工作日'},{value:5,label:'3-5个工作日'},
                {value:10,label:'5-10个工作日'},{value:15,label:'10-15个工作日'},{value:16,label:'15个工作日以上'}
            ],
            takeLoanTimes:0,
            takeLoanTimesLabel:'当天放款',
            takeLoanTimesShow:false,

            // provinceId 省
            provinceIdGroups:[{ value:320000,label:'江苏省' }],
            provinceId:320000,
            provinceIdLabel:'江苏省',
            provinceIdShow:false,

            // cityId 市
            cityIdGroups:[{ value:320100,label:'南京市' }],
            cityId:320100,
            cityIdLabel:'南京市',
            cityIdShow:false,

            // houseType
            houseTypeGroups:[{ value:0,label:'有房'},{value:1,label:'无房'}],
            houseType:0,

            // carType
            carTypeGroups:[{value:0,label:"有车"},{value:1,label:"无车"}],
            carType:0,

            //marryType
            marryTypeGroups:[{value:1,label:'已婚'},{value:0,label:'未婚'}],
            marryType:0,

            // age 年龄
            age:22,

            resLayer:false,
            score:0,
            money:0,
            
        }

        // just a eggshell
        this.logoutCount=0
    }

    async assess(){
        let body={
            professional:this.state.professional,
            houseType:this.state.houseType,
            age:this.state.age,
            provinceId:this.state.provinceId,
            cityId:this.state.cityId,
            loanAmount:this.state.loanAmount,
            loanTime:this.state.loanTime,
            takeLoanTimes:this.state.takeLoanTimes,
            credit:this.state.credit,
            carType:this.state.carType,
            marryType:this.state.marryType,
            salary:this.state.salary,
            loanType:this.state.loanType,
            payment:this.state.payment,
            provinceName:this.state.provinceIdLabel,
            cityName:this.state.cityIdLabel
        }
        
        let res=await util.ajax({url:'/assess/details',type:"POST",data:body})
        this.setState({
            score:res.data.data.score,
            money:res.data.data.money,
            resLayer:true
        })
    }

    componentDidMount(){
        if (!localStorage.token){
            layer.open({
                content:"您尚未登录，点击按钮跳转到登录页面",
                btn:"去登录",
                yes:function(){
                    window.location.href=`./login.html?redirect_uri=${encodeURIComponent(window.location.pathname)}`
                }
            })
        }

        if (parseInt(localStorage.userType) !== 1){
            layer.open({
                content:"请先注册或登录",
                btn:"去登录",
                yes(){
                    window.location.href=`./login.html?redirect_uri=${encodeURIComponent(window.location.pathname)}`
                }
            })
        }
        
        
    }

    logout(){
        if (this.logoutCount===0){
            let timer=setTimeout(()=>{
                if (this.logoutCount>7){
                    util.logout();
                }
                this.logoutCount=0;
            },3000);
        }
        this.logoutCount++
        
    }

    render(){            
        let title=<div className="titlebox">
            <div className="left">
                <div className="fill"></div>
            </div>
            <div className="text" onClick={this.logout.bind(this)}>精准测评</div>
            <div className="right">
                <div className="fill"></div>
            </div>
        </div>

        let address=<div className="com-sel">
            <span className="title">户口所在</span>
            <span className="seldiv b" style={{marginRight:'20px'}} onClick={()=>{this.setState({provinceIdShow:true})}}>{this.state.provinceIdLabel}<span className="icon">&lt;</span></span>
            <span className="seldiv b" onClick={()=>{this.setState({cityIdShow:true})}}>{this.state.cityIdLabel}<span className="icon">&lt;</span></span>
        </div>

        return (

            <div className="pro">
                <div className="view">
                    <div style={{height:"10px"}}></div>
                    <div className="formbox">
                        <SelView title="身份信息" label={this.state.professionalLabel} onClick={()=>{this.setState({professionalShow:true})}}/>
                        <SelView title="信用情况" label={this.state.creditLabel} onClick={()=>{this.setState({creditShow:true})}}/>
                        <RadioPicker title="房产情况" groups={this.state.houseTypeGroups} onChange={(val)=>{this.setState({houseType:val})}}/>
                        <RadioPicker title="车产情况" groups={this.state.carTypeGroups} onChange={(val)=>{this.setState({carType:val})}}/>
                        <div className="com-sel">
                            <span className="title">年龄</span>
                            <input type="text" value={this.state.age} onChange={(e)=>{this.setState({age:e.target.value})}} maxLength="2"/>
                        </div>
                        <RadioPicker title="婚姻状况" groups={this.state.marryTypeGroups} selected="0" onChange={(val)=>{this.setState({marryType:val})}}/>
                        <SelView title="月&nbsp;收&nbsp;入" label={this.state.salaryLabel} onClick={()=>{this.setState({salaryShow:true})}}/>
                        <SelView title="贷款金额" label={this.state.loanAmountLabel} onClick={()=>{this.setState({loanAmountShow:true})}}/>
                        <SelView title="贷款类型" label={this.state.loanTypeLabel} onClick={()=>{this.setState({loanTypeShow:true})}}/>
                        <SelView title="贷款期限" label={this.state.loanTimeLabel} onClick={()=>{this.setState({loanTimeShow:true})}}/>
                        <SelView title="还款方式" label={this.state.paymentLabel} onClick={()=>{this.setState({paymentShow:true})}}/>
                        <SelView title="放款时效" label={this.state.takeLoanTimesLabel} onClick={()=>{this.setState({takeLoanTimesShow:true})}}/>
                        <a href="javascript:;" className="assessbtn" onClick={this.assess.bind(this)}>立即测评</a>
                    </div>
                </div>
                <Picker show={this.state.professionalShow} groups={this.state.professionalGroups} onChange={(val,label)=>{this.setState({professional:val,professionalLabel:label,professionalShow:false})}} onMaskClick={()=>{this.setState({professionalShow:false})}}/>
                <Picker show={this.state.creditShow} groups={this.state.creditGroups} onChange={(val,label)=>{this.setState({credit:val,creditLabel:label,creditShow:false})}} onMaskClick={()=>{this.setState({creditShow:false})}}/>
                <Picker show={this.state.salaryShow} groups={this.state.salaryGroups} onChange={(val,label)=>{this.setState({salary:val,salaryLabel:label,salaryShow:false})}} onMaskClick={()=>{this.setState({salaryShow:false})}}/>
                <Picker show={this.state.loanAmountShow} groups={this.state.loanAmountGroups} onChange={(val,label)=>{this.setState({credit:val,loanAmountLabel:label,loanAmountShow:false})}} onMaskClick={()=>{this.setState({loanAmountShow:false})}}/>
                <Picker show={this.state.loanTypeShow} groups={this.state.loanTypeGroups} onChange={(val,label)=>{this.setState({loanType:val,loanTypeLabel:label,loanTypeShow:false})}} onMaskClick={()=>{this.setState({loanTypeShow:false})}}/>
                <Picker show={this.state.loanTimeShow} groups={this.state.loanTimeGroups} onChange={(val,label)=>{this.setState({loanTime:val,loanTimeLabel:label,loanTimeShow:false})}} onMaskClick={()=>{this.setState({loanTimeShow:false})}}/>
                <Picker show={this.state.paymentShow} groups={this.state.paymentGroups} onChange={(val,label)=>{this.setState({payment:val,paymentLabel:label,paymentShow:false})}} onMaskClick={()=>{this.setState({paymentShow:false})}}/>
                <Picker show={this.state.takeLoanTimesShow} groups={this.state.takeLoanTimesGroups} onChange={(val,label)=>{this.setState({takeLoanTimes:val,takeLoanTimesLabel:label,takeLoanTimesShow:false})}} onMaskClick={()=>{this.setState({takeLoanTimesShow:false})}}/>
                <Picker show={this.state.provinceIdShow} groups={this.state.provinceIdGroups} onChange={(val,label)=>{this.setState({provinceId:val,provinceIdLabel:label,provinceIdShow:false})}} onMaskClick={()=>{this.setState({provinceIdShow:false})}}/>
                <Picker show={this.state.cityIdShow} groups={this.state.cityIdGroups} onChange={(val,label)=>{this.setState({cityId:val,cityIdLabel:label,cityIdShow:false})}} onMaskClick={()=>{this.setState({cityIdShow:false})}}/>
                <div className="reslayer" style={{display:(this.state.resLayer)?"block":"none"}} onClick={()=>{this.setState({resLayer:false})}}>
                    <div style={{height:"50px"}}></div>
                    <img src="/assets/wechat/gougou.png" alt=""/>
                    <p style={{color:"#666",fontSize:"20px",marginTop:"20px"}}>恭喜您！您的评分为{this.state.score}！可贷金额最高为</p>
                    <p style={{color:"#F39642",fontSize:"26px",marginTop:"20px"}}>{this.state.money}万元</p>
                </div>
            </div>
        )
    }
}

ReactDom.render(<Pro/>,document.getElementById('app'))